<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>开发导航</title>
    <link rel="shortcut icon" href="/icon.svg">
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        padding: 20px 30px;
      }
      .title {
        margin: 18px 0 8px;
        font-size: 1.6rem;
        font-weight: 600;
        color: #343434;
      }
      .nav_links {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        grid-row-gap: 10px;
        grid-column-gap: 10px;
        grid-auto-flow: row dense;
        justify-content: center;
        margin-top: 10px;
      }
      @media (min-width: 500px) {
        .nav_links {
          grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        }
      }
      @media (min-width: 640px) {
        .nav_links {
          grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
        }
      }
      @media (min-width: 768px) {
        .nav_links {
          grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
        }
      }
      @media (min-width: 960px) {
        .nav_links {
          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        }
      }
      @media (min-width: 1440px) {
        .nav_links {
          grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        }
      }
      @media (min-width: 960px) {
        .nav_links {
          --m-nav-gap: 20px;
        }
      }
      .nav_link {
        --m-nav-icon-box-size: 40px;
        --m-nav-icon-size: 24px;
        --m-nav-box-gap: 12px;
        display: block;
        border: 1px solid #f6f6f7;
        border-radius: 8px;
        height: 100%;
        text-decoration: inherit;
        background-color: #f6f6f7;
        transition: all 0.25s;
      }

      .nav_link:hover {
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07),
          0 1px 4px rgba(0, 0, 0, 0.07);
        border-color: #42b983;
        text-decoration: initial;
        background-color: #fff;
      }

      .nav_link .box {
        display: flex;
        flex-direction: column;
        padding: 12px;
        height: 100%;
        color: rgba(60, 60, 67);
      }

      .nav_link .box-header {
        display: flex;
        align-items: center;
      }

      .nav_link .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
        border-radius: 6px;
        width: 40px;
        height: 40px;
        font-size: 24px;
        background-color: rgba(142, 150, 170, 0.14);
        transition: background-color 0.25s;
      }

      .nav_link .icon svg {
        width: 24px;
        fill: currentColor;
      }

      .nav_link .icon img {
        border-radius: 4px;
        width: 24px;
      }

      .nav_link .title {
        overflow: hidden;
        flex-grow: 1;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 40px;
        font-size: 16px;
        font-weight: 600;
      }

      .nav_link .desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-grow: 1;
        margin: 10px 0 0;
        line-height: 1.5;
        font-size: 12px;
        color: rgba(60, 60, 67, 0.78);
        font-weight: 500;
      }

      @media (max-width: 960px) {
        .nav_link {
          --m-nav-icon-box-size: 36px;
          --m-nav-icon-size: 20px;
          --m-nav-box-gap: 8px;
        }

        .nav_link .title {
          font-size: 14px;
        }
      }

      .nav_links {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        grid-row-gap: 10px;
        grid-column-gap: 10px;
        grid-auto-flow: row dense;
        justify-content: center;
        margin-top: 10px;
      }

      @media (min-width: 500px) {
        .nav_links {
          grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        }
      }

      @media (min-width: 640px) {
        .nav_links {
          grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
        }
      }

      @media (min-width: 768px) {
        .nav_links {
          grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
        }
      }

      @media (min-width: 960px) {
        .nav_links {
          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        }
      }

      @media (min-width: 1440px) {
        .nav_links {
          grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        }
      }

      @media (min-width: 960px) {
        .nav_links {
          --m-nav-gap: 20px;
        }
      }
    </style>
  </head>
  <body>
    <p class="title">开发社区</p>

    <div class="nav_links">
      <a
        class="nav_link"
        href="https://juejin.cn/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/favicons/favicon-32x32.png"
                alt="稀土掘金"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">稀土掘金</h5>
          </div>
          <p class="desc">面向全球中文开发者的技术内容分享与交流平台</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://www.zhihu.com/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://static.zhihu.com/heifetz/favicon.ico"
                alt="知乎"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">知乎</h5>
          </div>
          <p class="desc">
            中文互联网高质量的问答社区和创作者聚集的原创内容平台
          </p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://github.com"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://github.githubassets.com/favicons/favicon.svg"
                alt="Github"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Github</h5>
          </div>
          <p class="desc">面向开源及私有软件项目的托管平台</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://developers.weixin.qq.com/doc/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico"
                alt="微信官方文档"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">微信官方文档</h5>
          </div>
          <p class="desc">微信开发者平台文档</p>
        </article>
      </a>
    </div>

    <p class="title">开发社区</p>

    <div class="nav_links">
      <a
        class="nav_link"
        href="https://devtool.tech/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://devtool.tech/logo.svg"
                alt="开发者武器库"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">开发者武器库</h5>
          </div>
          <p class="desc">开发者武器库 · 属于程序员的工具箱</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://tool.lu/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://tool.lu/favicon.ico"
                alt="在线工具"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">在线工具</h5>
          </div>
          <p class="desc">开发人员在线工具</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://www.jyshare.com/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://static.jyshare.com/images/c-runoob-logo.ico"
                alt="菜鸟工具"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">菜鸟工具</h5>
          </div>
          <p class="desc">为开发设计人员提供在线工具</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://ps.gaoding.com/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://ps.gaoding.com//favicon.ico"
                alt="在线PS"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">在线PS</h5>
          </div>
          <p class="desc">专业精简的在线ps图片处理软件</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://convertio.co/zh/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://static.convertio.co/img/apple-touch-icon-180x180-precomposed.png"
                alt="convertio"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">convertio</h5>
          </div>
          <p class="desc">在线转换文件的简单工具</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://jsrun.net/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://cdns.jsrun.net/favicon.png"
                alt="JSRUN"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">JSRUN</h5>
          </div>
          <p class="desc">支持手机编程的在线编辑器</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://placehold.co/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://placehold.co/favicon.ico"
                alt="Placehold"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Placehold-占位图生成</h5>
          </div>
          <p class="desc">一个简单，快速，免费的图像占位符服务</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://picsum.photos/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://picsum.photos/assets/images/favicon/favicon-32x32.png"
                alt="随机图片生成"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">随机图片生成</h5>
          </div>
          <p class="desc">随机生成图片</p>
        </article>
      </a>
    </div>

    <p class="title">CSS/SVG Loading</p>

    <div class="nav_links">
      <a
        class="nav_link"
        href="https://cssfx.lovejade.cn/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://cssfx.lovejade.cn/favicon-32x32.png"
                alt="CSSFX"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">CSSFX</h5>
          </div>
          <p class="desc">简单酷炸的css3效果，可一键复制css样式</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://samherbert.net/svg-loaders/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="./_media/SVGLoaders.png"
                alt="SVG Loaders"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">SVG Loaders</h5>
          </div>
          <p class="desc">SVG Loaders - Sam Herbert</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://tobiasahlin.com/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://tobiasahlin.com/images/favicon.ico"
                alt="SpinKit"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">SpinKit</h5>
          </div>
          <p class="desc">CSS3加载动画集合</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://projects.lukehaas.me/css-loaders/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://projects.lukehaas.me/css-loaders/images/css-loaders-screenshot.jpg"
                alt="CSS Spinners"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">CSS Spinners</h5>
          </div>
          <p class="desc">有趣的单元素CSS3加载动画集合</p>
        </article>
      </a>
    </div>

    <p class="title">字体图标</p>

    <div class="nav_links">
      <a
        class="nav_link"
        href="https://www.bootcss.com/p/font-awesome/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://www.bootcss.com/p/font-awesome/assets/ico/favicon.ico"
                alt="Font Awesome"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Font Awesome</h5>
          </div>
          <p class="desc">完美的图标字体 只为Bootstrap设计</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://www.iconfont.cn/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
                alt="iconfont"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">iconfont</h5>
          </div>
          <p class="desc">国内功能很强大且图标内容很丰富的矢量图标库</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://iconpark.oceanengine.com/official"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://lf1-cdn2-tos.bytegoofy.com/bydesign/iconparksite/logo.svg"
                alt="IconPark"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">IconPark</h5>
          </div>
          <p class="desc">通过技术驱动矢量图标样式的开源图标库</p>
        </article>
      </a>
    </div>

    <p class="title">CSS</p>

    <div class="nav_links">
      <a
        class="nav_link"
        href="https://www.sass.hk/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://www.sass.hk/favicon.ico"
                alt="SASS"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">SASS</h5>
          </div>
          <p class="desc">最成熟、最稳定、最强大的专业级CSS扩展语言！</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://less.bootcss.com/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://less.bootcss.com/public/ico/favicon.ico"
                alt="Less"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Less</h5>
          </div>
          <p class="desc">向后兼容的 CSS 扩展语言</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://www.stylus-lang.cn/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://www.stylus-lang.cn/img/stylus-logo.png"
                alt="Stylus"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Stylus</h5>
          </div>
          <p class="desc">富于表现力、动态的、健壮的 CSS</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://cn.windicss.org/guide/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://cn.windicss.org/guide/assets/logo.svg"
                alt="Windi CSS"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Windi CSS</h5>
          </div>
          <p class="desc">下一代工具类 CSS 框架</p>
        </article>
      </a>
    </div>

    <p class="title">JavaScript类库</p>

    <div class="nav_links">
      <a
        class="nav_link"
        href="https://www.lodashjs.com/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://www.lodashjs.com/img/favicon.ico"
                alt="Lodash"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Lodash</h5>
          </div>
          <p class="desc">一致性、模块化、高性能的 JavaScript 实用工具库</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://dayjs.fenxianglu.cn/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://dayjs.fenxianglu.cn/assets/favicon.png"
                alt="Day.js"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Day.js</h5>
          </div>
          <p class="desc">解析、验证、操作和显示日期和时间</p>
        </article>
      </a>
    </div>

    <p class="title">Vue生态</p>

    <div class="nav_links">
      <a
        class="nav_link"
        href="https://cn.vuejs.org/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://cn.vuejs.org//logo.svg"
                alt="Vue3"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Vue3</h5>
          </div>
          <p class="desc">易学易用，性能出色，适用场景丰富的 Web 前端框架</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://v2.cn.vuejs.org/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://v2.cn.vuejs.org/images/icons/android-icon-192x192.png"
                alt="Vue2"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Vue2</h5>
          </div>
          <p class="desc">渐进式 JavaScript 框架</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://router.vuejs.org/zh/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://router.vuejs.org/zh/logo.svg"
                alt="Vue Router"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Vue Router</h5>
          </div>
          <p class="desc">为 Vue.js 提供富有表现力、可配置的、方便的路由</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://pinia.vuejs.org/zh/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://pinia.vuejs.org/zh/logo.svg"
                alt="Pinia"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Pinia</h5>
          </div>
          <p class="desc">符合直觉的 Vue.js 状态管理库</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://nuxt.com/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://nuxt.com/icon.png"
                alt="Nuxt"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Nuxt</h5>
          </div>
          <p class="desc">基于 Vue.js 的通用应用框架</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://ezdoc.cn/docs/nuxtjs"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://ezdoc.cn/images/favicon.svg"
                alt="Nuxt中文文档"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Nuxt中文文档</h5>
          </div>
          <p class="desc">基于 Vue.js 的通用应用框架</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://www.vueusejs.com/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://www.vueusejs.com/favicon-32x32.png"
                alt="Vue Use"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Vue Use</h5>
          </div>
          <p class="desc">基于Vue组合式API的实用工具集</p>
        </article>
      </a>
    </div>

    <p class="title">Node</p>

    <div class="nav_links">
      <a
        class="nav_link"
        href="https://nvm.uihtm.com/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://nvm.uihtm.com/favicon.ico"
                alt="NVM"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">NVM</h5>
          </div>
          <p class="desc">nodejs版本管理工具</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://koa.bootcss.com/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="./_media/koa.png"
                alt="Koa"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Koa</h5>
          </div>
          <p class="desc">基于Node.js平台的下一代web开发框架</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://www.expressjs.com.cn/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://www.expressjs.com.cn/images/favicon.png"
                alt="Express"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Express</h5>
          </div>
          <p class="desc">基于Node.js平台，快速、开放、极简的Web开发框架</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://www.eggjs.org/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://www.eggjs.org/favicon.png"
                alt="Egg"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Egg</h5>
          </div>
          <p class="desc">为企业级框架和应用而生</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://nestjs.com/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://nestjs.com/favicon-32x32.0a29681d.png"
                alt="Nest"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Nest</h5>
          </div>
          <p class="desc">渐进式Node.js框架</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://www.kancloud.cn/juukee/nestjs/2666734"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://nestjs.com/favicon-32x32.0a29681d.png"
                alt="Nest.js中文文档"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Nest.js中文文档</h5>
          </div>
          <p class="desc">Nest.js中文文档</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://www.npmjs.com/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://static-production.npmjs.com/58a19602036db1daee0d7863c94673a4.png"
                alt="Nest.js中文文档"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">npm</h5>
          </div>
          <p class="desc">Nest.js包管理工具</p>
        </article>
      </a>
    </div>

    <p class="title">微信小程序</p>

    <div class="nav_links">
      <a
        class="nav_link"
        href="https://developers.weixin.qq.com/miniprogram/dev/framework/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico"
                alt="微信小程序文档"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">微信小程序文档</h5>
          </div>
          <p class="desc">微信小程序文档</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://tdesign.tencent.com/miniprogram/overview"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://static.tdesign.tencent.com/favicon.ico"
                alt="TDesign"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">TDesign</h5>
          </div>
          <p class="desc">微信小程序组件库</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://uniapp.dcloud.net.cn/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/icon.png?v=1556263038788"
                alt="uni-app"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">uni-app</h5>
          </div>
          <p class="desc">使用 Vue.js 开发所有前端应用的框架</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://vant-contrib.gitee.io/vant-weapp/#/home"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://img.yzcdn.cn/vant/logo.png"
                alt="Vant Weapp"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Vant Weapp</h5>
          </div>
          <p class="desc">轻量、可靠的小程序 UI 组件库</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://www.uviewui.com/components/intro.html"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://www.uviewui.com/common/logo.png"
                alt="uView"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">uView</h5>
          </div>
          <p class="desc">全面兼容nvue的uni-app生态框架</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://uiadmin.net/uview-plus/components/intro.html"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://uiadmin.net/uview-plus/common/logo.png"
                alt="uview-plus"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">uview-plus</h5>
          </div>
          <p class="desc">基于uView2.0初步修改,vue.js3.0版本</p>
        </article>
      </a>
    </div>

    <p class="title">构建工具</p>

    <div class="nav_links">
      <a
        class="nav_link"
        href="https://www.webpackjs.com/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://www.webpackjs.com/favicon.f326220248556af65f41.ico"
                alt="webpack"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">webpack</h5>
          </div>
          <p class="desc">模块打包器</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://cn.vitejs.dev/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://cn.vitejs.dev/logo.svg"
                alt="Vite"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Vite</h5>
          </div>
          <p class="desc">下一代前端工具链</p>
        </article>
      </a>
      <a
        class="nav_link"
        href="https://www.rollupjs.com/"
        target="_blank"
        rel="noreferrer"
      >
        <article class="box">
          <div class="box-header">
            <div class="icon">
              <img
                src="https://www.rollupjs.com/img/favicon.png"
                alt="Vite"
                onerror="this.parentElement.style.display='none'"
                class="medium-zoom-image"
              />
            </div>
            <h5 id="can-i-use" class="title">Rollup</h5>
          </div>
          <p class="desc">JavaScript 模块打包器</p>
        </article>
      </a>
    </div>
  </body>
</html>
